<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时比分查看器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: white;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .header {
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .match-info {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .scoreboard {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .team {
            flex: 1;
            text-align: center;
        }

        .team-logo {
            font-size: 4rem;
            margin-bottom: 10px;
        }

        .team-name {
            font-size: 1.5rem;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .team-score {
            font-size: 4rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .vs {
            font-size: 2rem;
            font-weight: bold;
            margin: 0 20px;
        }

        .game-info {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .game-info div {
            margin: 10px 0;
            font-size: 1.2rem;
        }

        .controls {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 15px 0;
            flex-wrap: wrap;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        button.reset {
            background-color: #f44336;
        }

        button.reset:hover {
            background-color: #d32f2f;
        }

        button.share {
            background-color: #2196F3;
        }

        button.share:hover {
            background-color: #1976D2;
        }

        .qr-section {
            background-color: white;
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .qr-section h3 {
            color: #333;
            margin-bottom: 15px;
        }

        #qrcode {
            display: inline-block;
            padding: 10px;
            background: white;
            border-radius: 10px;
        }

        .instructions {
            margin-top: 20px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 15px;
        }

        .instructions p {
            margin: 10px 0;
        }

        @media (max-width: 600px) {
            .scoreboard {
                flex-direction: column;
            }

            .vs {
                margin: 15px 0;
            }

            .team-logo {
                font-size: 3rem;
            }

            .team-score {
                font-size: 3rem;
            }

            .button-group {
                flex-direction: column;
                align-items: center;
            }

            button {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🏀 实时比分查看器</h1>
            <div class="match-info">
                <h2 id="match-title">湖人队 vs 勇士队</h2>
            </div>
        </div>

        <div class="scoreboard">
            <div class="team">
                <div class="team-logo" id="team1-logo">🏀</div>
                <div class="team-name" id="team1-name">湖人队</div>
                <div class="team-score" id="team1-score">0</div>
            </div>

            <div class="vs">VS</div>

            <div class="team">
                <div class="team-logo" id="team2-logo">🏀</div>
                <div class="team-name" id="team2-name">勇士队</div>
                <div class="team-score" id="team2-score">0</div>
            </div>
        </div>

        <div class="game-info">
            <div>比赛状态: <span id="status">进行中</span></div>
            <div>当前节次: <span id="period">第一节</span></div>
            <div>剩余时间: <span id="time-remaining">12:00</span></div>
        </div>

        <div class="controls">
            <h3>比赛控制</h3>
            <div class="button-group">
                <button onclick="updateScore('team1', 1)">湖人队 +1</button>
                <button onclick="updateScore('team1', 2)">湖人队 +2</button>
                <button onclick="updateScore('team1', 3)">湖人队 +3</button>
            </div>
            <div class="button-group">
                <button onclick="updateScore('team2', 1)">勇士队 +1</button>
                <button onclick="updateScore('team2', 2)">勇士队 +2</button>
                <button onclick="updateScore('team2', 3)">勇士队 +3</button>
            </div>
            <div class="button-group">
                <button onclick="nextPeriod()">下一节</button>
                <button onclick="toggleTimer()" id="timer-btn">暂停计时</button>
                <button onclick="resetGame()" class="reset">重置比赛</button>
                <button onclick="shareGame()" class="share">分享比赛</button>
            </div>
        </div>

        <div class="qr-section">
            <h3>扫描二维码分享</h3>
            <div id="qrcode"></div>
            <p style="color: #333; margin-top: 10px;">扫描此二维码即可在手机上查看实时比分</p>
        </div>

        <div class="instructions">
            <p>🔄 比分实时更新，所有查看此页面的人都会看到相同比分</p>
            <p>📱 扫描二维码或分享链接给其他人</p>
            <p>🎮 点击上方按钮更新比分</p>
            <p>💾 数据会自动保存，刷新页面不会丢失</p>
        </div>
    </div>

    <script>
        // 使用国内CDN的QRCode库
        function loadQRCodeLibrary() {
            return new Promise((resolve, reject) => {
                if (window.QRCode) {
                    resolve();
                    return;
                }

                const script = document.createElement('script');
                script.src = 'https://cdn.bootcdn.net/ajax/libs/qrcode/1.5.3/qrcode.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        // 比赛数据
        let matchData = {
            team1: { name: '湖人队', score: 0, logo: '🏀' },
            team2: { name: '勇士队', score: 0, logo: '🏀' },
            period: '第一节',
            timeRemaining: '12:00',
            status: '进行中',
            timerRunning: true
        };

        // 初始化
        async function init() {
            // 加载QRCode库
            await loadQRCodeLibrary();

            // 尝试从本地存储加载数据
            loadFromLocalStorage();

            // 从URL参数加载数据（优先级更高）
            loadFromURL();

            // 更新显示
            updateDisplay();

            // 启动计时器
            setInterval(updateTimer, 1000);

            // 生成二维码
            generateQRCode();

            // 更新URL但不刷新页面
            updateURL();
        }

        // 从本地存储加载数据
        function loadFromLocalStorage() {
            const savedData = localStorage.getItem('liveScoreData');
            if (savedData) {
                try {
                    const parsedData = JSON.parse(savedData);
                    matchData = { ...matchData, ...parsedData };
                } catch (e) {
                    console.error('解析本地存储数据失败:', e);
                }
            }
        }

        // 从URL参数加载数据
        function loadFromURL() {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('data')) {
                try {
                    const data = JSON.parse(decodeURIComponent(urlParams.get('data')));
                    matchData = { ...matchData, ...data };
                } catch (e) {
                    console.error('解析URL数据失败:', e);
                }
            }
        }

        // 更新URL以包含比赛数据
        function updateURL() {
            const dataStr = encodeURIComponent(JSON.stringify({
                team1: matchData.team1,
                team2: matchData.team2,
                period: matchData.period,
                timeRemaining: matchData.timeRemaining,
                status: matchData.status
            }));

            const newURL = window.location.origin + window.location.pathname + '?data=' + dataStr;
            window.history.replaceState(null, '', newURL);
        }

        // 更新显示
        function updateDisplay() {
            document.getElementById('team1-score').textContent = matchData.team1.score;
            document.getElementById('team2-score').textContent = matchData.team2.score;
            document.getElementById('team1-name').textContent = matchData.team1.name;
            document.getElementById('team2-name').textContent = matchData.team2.name;
            document.getElementById('team1-logo').textContent = matchData.team1.logo;
            document.getElementById('team2-logo').textContent = matchData.team2.logo;
            document.getElementById('period').textContent = matchData.period;
            document.getElementById('time-remaining').textContent = matchData.timeRemaining;
            document.getElementById('status').textContent = matchData.status;
            document.getElementById('match-title').textContent = matchData.team1.name + ' vs ' + matchData.team2.name;
            document.getElementById('timer-btn').textContent = matchData.timerRunning ? '暂停计时' : '开始计时';
        }

        // 更新比分
        function updateScore(team, points) {
            matchData[team].score += points;
            saveAndUpdate();
        }

        // 下一节
        function nextPeriod() {
            const periods = ['第一节', '第二节', '第三节', '第四节'];
            const currentIndex = periods.indexOf(matchData.period);

            if (currentIndex < periods.length - 1) {
                matchData.period = periods[currentIndex + 1];
                matchData.timeRemaining = '12:00';
            } else {
                matchData.status = '已结束';
                matchData.timerRunning = false;
            }

            saveAndUpdate();
        }

        // 切换计时器
        function toggleTimer() {
            matchData.timerRunning = !matchData.timerRunning;
            saveAndUpdate();
        }

        // 重置比赛
        function resetGame() {
            if (confirm('确定要重置比赛吗？')) {
                matchData.team1.score = 0;
                matchData.team2.score = 0;
                matchData.period = '第一节';
                matchData.timeRemaining = '12:00';
                matchData.status = '进行中';
                matchData.timerRunning = true;

                saveAndUpdate();
            }
        }

        // 分享比赛
        function shareGame() {
            const url = window.location.href;
            if (navigator.share) {
                navigator.share({
                    title: '实时比分 - ' + matchData.team1.name + ' vs ' + matchData.team2.name,
                    text: '当前比分: ' + matchData.team1.score + ' - ' + matchData.team2.score,
                    url: url
                });
            } else {
                navigator.clipboard.writeText(url).then(() => {
                    alert('比赛链接已复制到剪贴板！');
                });
            }
        }

        // 保存数据并更新显示
        function saveAndUpdate() {
            updateDisplay();
            updateURL();
            localStorage.setItem('liveScoreData', JSON.stringify(matchData));
            generateQRCode(); // 更新二维码
        }

        // 计时器功能
        function updateTimer() {
            if (!matchData.timerRunning || matchData.status === '已结束') return;

            let minutes = parseInt(matchData.timeRemaining.split(':')[0]);
            let seconds = parseInt(matchData.timeRemaining.split(':')[1]);

            if (seconds === 0) {
                if (minutes === 0) {
                    nextPeriod();
                    return;
                } else {
                    minutes--;
                    seconds = 59;
                }
            } else {
                seconds--;
            }

            matchData.timeRemaining = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            saveAndUpdate();
        }

        // 生成二维码
        function generateQRCode() {
            const qrElement = document.getElementById('qrcode');
            qrElement.innerHTML = ''; // 清空之前的二维码

            const url = window.location.href;

            if (window.QRCode) {
                QRCode.toCanvas(qrElement, url, {
                    width: 200,
                    height: 200,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                }, function(error) {
                    if (error) {
                        console.error('生成二维码失败:', error);
                        showTextQRCode(url);
                    }
                });
            } else {
                showTextQRCode(url);
            }
        }

        // 如果QRCode库加载失败，显示文本形式的"二维码"
        function showTextQRCode(url) {
            const qrElement = document.getElementById('qrcode');
            qrElement.innerHTML = `
                <div style="border: 2px dashed #ccc; padding: 20px; border-radius: 10px;">
                    <p style="color: #333; margin: 0; word-break: break-all;">${url}</p>
                    <p style="color: #666; margin: 10px 0 0 0;">请复制上方链接分享</p>
                </div>
            `;
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>